<template>
  <div class="out">
    <zHeader pageTitle="商场信息"></zHeader>

    <div class="pageOut">
      <zInfoShowBtn :ifExpand="expandList.ifCommunityBasicExpand" infoShowTitle="商场基本信息" @changeExpandHandler="changeExpandHandler('ifCommunityBasicExpand')">
        <template #btnIcon>
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48" width="34" height="34" style="" filter="none">
            <g>
            <rect width="48" height="48" fill="rgba(24,126,255,1)" fill-opacity="0.01" stroke="none"></rect><path d="M9 18V42H39V18L24 6L9 18Z" fill="none"></path><path d="M9 42V18L4 22L24 6L44 22L39 18V42H9Z" stroke="rgba(24,126,255,1)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path><path d="M19 29V42H29V29H19Z" fill="none" stroke="rgba(24,126,255,1)" stroke-width="4" stroke-linejoin="round"></path><path d="M9 42H39" stroke="rgba(24,126,255,1)" stroke-width="4" stroke-linecap="round" fill="none"></path>
            </g>
          </svg>
        </template>

        <template #contentCard>
          <van-cell-group inset class="cellGroupCard" v-if="expandList.ifCommunityBasicExpand">
            <zVanCell title="建成年代" :content="xiaoQuDetailData.completeYear" />
            <zVanCell title="容积率" :content="xiaoQuDetailData.rongJiRatio" />
            <zVanCell title="绿化率" :content="xiaoQuDetailData.lvHuaRatio" />
            <zVanCell title="交易权属" :content="xiaoQuDetailData.jiaoYiQuanShuText" />
            <zVanCell title="总户数" :content="xiaoQuDetailData.zongHuShu" />
            <zVanCell title="楼栋数" :content="xiaoQuDetailData.louDongShu" />
          </van-cell-group>
          <!-- 原来设计图的样式 -->   
          <!-- <div class="contentCard" v-if="expandList.ifCommunityBasicExpand">
            <div class="contentItem">
              <div class="tipText">建成年代：</div>
              <div class="content">2012-2013年</div>
            </div>
            <div class="contentItem">
              <div class="tipText">容积率：</div>
              <div class="content">1.6</div>
            </div>
            <div class="contentItem">
              <div class="tipText">绿化率：</div>
              <div class="content">40%</div>
            </div>
            <div class="contentItem">
              <div class="tipText">交易权属：</div>
              <div class="content">商品房</div>
            </div>
            <div class="contentItem">
              <div class="tipText">总户数：</div>
              <div class="content">1021</div>
            </div>
            <div class="contentItem">
              <div class="tipText">楼栋数：</div>
              <div class="content">61</div>
            </div>
          </div> -->
        </template>
      </zInfoShowBtn>
      
      <zInfoShowBtn :ifExpand="expandList.ifParticipateUnitExpand" infoShowTitle="参建单位信息" @changeExpandHandler="changeExpandHandler('ifParticipateUnitExpand')">
        <template #btnIcon>
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" width="34" height="34" style="" filter="none">
            <g>
            <path d="M20.512 21.824c-0.048-0.242-0.188-0.445-0.381-0.574l-0.003-0.002c-1.088-0.736-2.336-1.184-3.584-1.568-0.256-0.096-0.416-0.032-0.608 0.192-1.376 1.664-3.104 2.464-5.312 2.112-1.472-0.256-2.624-1.056-3.552-2.208-0.096-0.128-0.16-0.288-0.352-0.224-1.376 0.416-2.752 0.896-3.968 1.696-0.192 0.16-0.32 0.32-0.352 0.576-0.125 0.645-0.247 1.151-0.387 1.65l0.035-0.146c-0.096 0.352-0.032 0.448 0.32 0.512 3.232 0.64 6.464 0.896 10.272 0.864 1.411-0.043 2.731-0.135 4.035-0.276l-0.227 0.020c1.408-0.128 2.816-0.352 4.192-0.608 0.256-0.064 0.32-0.16 0.256-0.416-0.141-0.432-0.274-0.971-0.372-1.521l-0.012-0.079zM7.104 14.144c0.416-0.032 0.896-0.128 1.216 0.032 0.992 0.48 2.016 0.512 3.040 0.544 1.056 0 2.080 0.032 3.072-0.32 0.416-0.16 0.832-0.288 1.312-0.288 1.024 0.032 1.12-0.096 0.96-1.12v-0.064c-0.032-0.128-0.096-0.256-0.256-0.256-0.288 0.032-0.288-0.128-0.288-0.32-0.128-1.44-0.704-2.656-1.76-3.616-0.384-0.352-0.928-0.512-1.12-1.088-0.032-0.064-0.16-0.16-0.256-0.128-0.128 0.064-0.064 0.16-0.096 0.256-0.057 0.557-0.114 1.332-0.155 2.112l-0.005 0.128c-0.032 0.288-0.096 0.544-0.384 0.544-0.384 0-0.352-0.32-0.352-0.576 0.032-0.768 0.032-1.536 0.096-2.304 0.032-0.48-0.288-0.352-0.544-0.384s-0.448 0-0.416 0.384c0.032 0.832 0.032 1.664 0.064 2.496 0 0.192-0.064 0.352-0.288 0.384-0.256 0-0.384-0.128-0.384-0.352-0.064-0.352-0.064-0.704-0.096-1.056-0.064-0.544-0.096-1.088-0.16-1.664-0.352 0.192-0.352 0.192-0.48 0.48-0.064 0.128-0.128 0.224-0.256 0.288-1.536 0.928-2.304 2.336-2.432 4.096-0.032 0.192-0.032 0.32-0.256 0.32s-0.32 0.128-0.288 0.32c0 0.192 0 0.416-0.032 0.608-0.032 0.384 0.128 0.544 0.544 0.544zM13.408 9.12c1.184 0.896 1.728 1.984 1.824 3.36 0.032 0.224-0.096 0.288-0.256 0.352-0.608 0.16-1.216 0.288-1.856 0.32-0.16 0.032-0.224 0-0.192-0.16 0.128-1.28 0.288-2.528 0.48-3.872zM9.888 9.184c0.16 1.28 0.32 2.496 0.48 3.744 0.032 0.192-0.032 0.256-0.256 0.224-0.608-0.064-1.184-0.128-1.76-0.32-0.128-0.032-0.288-0.064-0.32-0.256-0.064-1.056 0.768-2.912 1.856-3.392zM7.552 14.72c-0.288 0.032-0.736-0.224-0.768 0.352-0.032 0.64 0.16 1.248 0.672 1.632 0.288 0.192 0.416 0.416 0.544 0.704 0.64 1.696 2.048 2.752 3.648 2.752 0.352-0.032 0.704-0.032 1.056-0.16 1.344-0.48 2.144-1.44 2.624-2.72 0.096-0.16 0.128-0.352 0.32-0.48 0.544-0.288 0.768-0.8 0.832-1.408s0-0.672-0.576-0.704c-0.288 0-0.448 0.032-0.384 0.384 0.064 0.416 0.064 0.864-0.544 0.928-0.224 0.032-0.32 0.256-0.384 0.48-0.096 0.416-0.256 0.768-0.448 1.152-0.832 1.408-2.336 1.952-3.68 1.28-0.96-0.48-1.472-1.344-1.76-2.368-0.064-0.224-0.096-0.512-0.352-0.544-0.608-0.064-0.608-0.448-0.608-0.896 0-0.16 0.192-0.448-0.192-0.384zM29.728 20.224c-0.032-0.192-0.128-0.288-0.256-0.384-0.736-0.512-1.568-0.8-2.432-1.088-0.192-0.064-0.288 0-0.416 0.128-0.928 1.152-2.112 1.696-3.584 1.44-1.024-0.16-1.792-0.704-2.432-1.504-0.064-0.064-0.096-0.16-0.256-0.128-0.576 0.16-1.152 0.352-1.696 0.608 0.96 0.352 1.92 0.736 2.752 1.312 0.224 0.128 0.352 0.288 0.384 0.544 0.064 0.32 0.128 0.64 0.224 0.96 0.692 0.036 1.519 0.059 2.351 0.064l0.017 0c0.64-0.032 1.6-0.064 2.592-0.16 0.96-0.096 1.888-0.256 2.848-0.416 0.16-0.032 0.192-0.128 0.16-0.288-0.080-0.265-0.169-0.632-0.242-1.003l-0.014-0.085zM20.64 15.008c0.256-0.032 0.576-0.096 0.832 0.032 0.64 0.32 1.344 0.352 2.048 0.352 0.704 0.032 1.408 0.032 2.080-0.224 0.288-0.096 0.576-0.192 0.896-0.16 0.704 0 0.736-0.064 0.64-0.8v-0.032c0-0.096-0.064-0.16-0.16-0.16-0.192 0-0.192-0.096-0.192-0.224-0.096-0.96-0.48-1.792-1.184-2.464-0.288-0.224-0.64-0.32-0.768-0.704-0.032-0.064-0.096-0.128-0.192-0.096-0.064 0.032-0.032 0.096-0.032 0.16-0.064 0.512-0.096 1.024-0.128 1.536-0.032 0.16-0.064 0.352-0.256 0.352-0.256 0-0.256-0.224-0.256-0.416 0.032-0.512 0.032-1.024 0.064-1.536 0.032-0.352-0.16-0.256-0.352-0.256-0.192-0.032-0.32 0-0.288 0.256 0.032 0.544 0.032 1.12 0.032 1.664 0 0.16-0.032 0.288-0.192 0.288s-0.256-0.096-0.256-0.256l-0.064-0.704-0.096-1.12c-0.256 0.128-0.256 0.128-0.32 0.32-0.048 0.079-0.113 0.144-0.19 0.191l-0.002 0.001c-1.024 0.64-1.568 1.6-1.632 2.784-0.032 0.128-0.032 0.224-0.192 0.224-0.16-0.032-0.192 0.064-0.192 0.224v0.384c-0.032 0.288 0.064 0.384 0.352 0.384zM24.896 11.584c0.832 0.608 1.184 1.376 1.248 2.304 0.032 0.128-0.064 0.192-0.16 0.224-0.366 0.113-0.791 0.193-1.23 0.223l-0.018 0.001c-0.128 0.032-0.16 0-0.16-0.128 0.096-0.832 0.224-1.696 0.32-2.624zM22.528 11.648c0.096 0.864 0.192 1.696 0.32 2.528 0 0.128-0.032 0.192-0.16 0.16-0.444-0.028-0.858-0.108-1.252-0.234l0.036 0.010c-0.096-0.032-0.192-0.032-0.192-0.192-0.064-0.704 0.512-1.952 1.248-2.272zM20.928 15.392c-0.192 0.032-0.512-0.16-0.512 0.256-0.032 0.448 0.096 0.832 0.48 1.088 0.16 0.16 0.256 0.288 0.352 0.48 0.448 1.152 1.408 1.888 2.464 1.888 0.256-0.032 0.48-0.032 0.736-0.128 0.896-0.32 1.44-0.96 1.792-1.824 0.032-0.128 0.064-0.256 0.192-0.32 0.352-0.224 0.512-0.576 0.576-0.96 0.032-0.416 0-0.48-0.416-0.48-0.192 0-0.288 0-0.256 0.256 0.064 0.288 0.064 0.576-0.352 0.64-0.16 0-0.224 0.16-0.256 0.32-0.064 0.256-0.192 0.512-0.32 0.768-0.544 0.96-1.568 1.344-2.496 0.864-0.672-0.32-0.992-0.896-1.184-1.6-0.032-0.16-0.096-0.352-0.256-0.352-0.416-0.064-0.384-0.32-0.384-0.608-0.032-0.128 0.096-0.32-0.16-0.288z" fill="rgba(24,126,255,1)"></path>
            </g>
          </svg>
        </template>

        <template #contentCard>
          <van-cell-group inset class="cellGroupCard" v-if="expandList.ifParticipateUnitExpand">
            <ZCellMultipleLine v-if="xiaoQuDetailData.xiaoQuCanJianList" title="景观设计" :contentList="xiaoQuDetailData.xiaoQuCanJianList" contentKey="canJianName" />
            <ZCellMultipleLine v-if="xiaoQuDetailData.xiaoQuJianZhuSheJiDanWeiList" title="建筑设计" :contentList="xiaoQuDetailData.xiaoQuJianZhuSheJiDanWeiList" contentKey="danWeiName" />
            <ZCellMultipleLine v-if="xiaoQuDetailData.xiaoQuShiNeiSheJiDanWeiList" title="室内设计" :contentList="xiaoQuDetailData.xiaoQuShiNeiSheJiDanWeiList" contentKey="danWeiName" />
          </van-cell-group>
          <!-- 原来设计图的样式 -->
          <!-- <div class="contentCard" v-if="expandList.ifParticipateUnitExpand">
            <div class="contentItem">
              <div class="tipText">景观设计：</div>
              <div class="content">XX景观设计规划公司</div>
            </div>
            <div class="contentItem">
              <div class="tipText">建筑设计：</div>
              <div class="content">X建筑设计研究院股份有限公司</div>
            </div>
            <div class="contentItem">
              <div class="tipText">室内设计：</div>
              <div class="content">XX设计事务所</div>
            </div>
          </div> -->
        </template>
      </zInfoShowBtn>
      
      <zInfoShowBtn :ifExpand="expandList.ifPropertyUnitExpand" infoShowTitle="物业单位信息" @changeExpandHandler="changeExpandHandler('ifPropertyUnitExpand')">
        <template #btnIcon>
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48" width="34" height="34" style="" filter="none">
            <g>
            <rect width="48" height="48" fill="rgba(24,126,255,1)" fill-opacity="0.01" stroke="none"></rect><path d="M36 32C40.4183 32 44 28.4183 44 24C44 19.5817 40.4183 16 36 16" fill="none"></path><path d="M36 32V32C40.4183 32 44 28.4183 44 24C44 19.5817 40.4183 16 36 16" stroke="rgba(24,126,255,1)" stroke-width="4" stroke-linejoin="round" fill="none"></path><path d="M12 16C7.58172 16 4 19.5817 4 24C4 28.4183 7.58172 32 12 32" fill="none"></path><path d="M12 16C7.58172 16 4 19.5817 4 24C4 28.4183 7.58172 32 12 32V32" stroke="rgba(24,126,255,1)" stroke-width="4" stroke-linejoin="round" fill="none"></path><path d="M12 32V31.5V29V24V16C12 9.37258 17.3726 4 24 4C30.6274 4 36 9.37258 36 16V32C36 38.6274 30.6274 44 24 44" stroke="rgba(24,126,255,1)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>
            </g>
          </svg>
        </template>

        <template #contentCard>
          <van-cell-group inset class="cellGroupCard" v-if="expandList.ifPropertyUnitExpand" v-for="item in xiaoQuDetailData.xiaoQuWuYeList" :key="item.wuYeId">
            <zVanCell title="单位名称" :content="item.wuYeName" />
            <zVanCell title="联系人" :content="item.contactName" />
            <van-cell title="联系电话" :value="item.contactPhone" />
            <zVanCell title="员工人数" :content="item.staffNumber" />
            <zVanCell title="客户满意度" :content="item.userSatisfaction" />
            <zVanCell title="特色服务" :content="item.teSeFuWu" />
            <zVanCell title="环保措施" :content="item.huanBaoCuoShi" />
          </van-cell-group>
          <!-- 原来设计图的样式 -->
          <!-- <div class="contentCard" v-if="expandList.ifPropertyUnitExpand">
            <div class="contentItem">
              <div class="tipText">单位名称：</div>
              <div class="content">XXX物业管理有限公司</div>
            </div>
            <div class="contentItem">
              <div class="tipText">联系人：</div>
              <div class="content">XX</div>
            </div>
            <div class="contentItem">
              <div class="tipText">联系电话：</div>
              <div class="content">XXXXXXXXX</div>
            </div>
            <div class="contentItem">
              <div class="tipText">员工人数：</div>
              <div class="content">150人</div>
            </div>
            <div class="contentItem">
              <div class="tipText">客户满意度：</div>
              <div class="content">90%</div>
            </div>
            <div class="contentItem">
              <div class="tipText">特色服务：</div>
              <div class="content">24小时安保，智能门禁</div>
            </div>
            <div class="contentItem">
              <div class="tipText">环保措施：</div>
              <div class="content">垃圾分类，节能照明</div>
            </div>
          </div> -->
        </template>
      </zInfoShowBtn>
      
      <zInfoShowBtn :ifExpand="expandList.ifCommunityTourExpand" infoShowTitle="商场导览" @changeExpandHandler="changeExpandHandler('ifCommunityTourExpand')">
        <template #btnIcon>
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48" width="30" height="30" style="" filter="none">
            <g>
            <rect width="48" height="48" fill="rgba(24,126,255,1)" fill-opacity="0.01" stroke="none"></rect><path d="M24.5 4L9 44L24.5 34.9091L40 44L24.5 4Z" fill="none" stroke="rgba(24,126,255,1)" stroke-width="4" stroke-linejoin="round"></path>
            </g>
          </svg>
        </template>

        <template #contentCard>
          <video v-for="(item, index) in xiaoQuDetailData.xiaoQuDaoLanList" :key="index" controls class="videoContent" v-if="expandList.ifCommunityTourExpand">
            <source :src="item.shiPin" type="video/mp4" />
          </video>
          <!-- 原来的图片示例 -->
          <!-- <div class="imageContent" v-if="expandList.ifCommunityTourExpand">
            <img class="image" :src="communityTourVideoExampleBack">
            <svg class="videoPlayIcon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48" width="49" height="49" style="" filter="none">
              <g>
              <rect width="48" height="48" fill="rgba(255,255,255,1)" fill-opacity="0.01" stroke="none"></rect><path d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z" fill="none" stroke="rgba(255,255,255,1)" stroke-width="4" stroke-linejoin="round"></path><path d="M20 24V17.0718L26 20.5359L32 24L26 27.4641L20 30.9282V24Z" fill="none" stroke="rgba(255,255,255,1)" stroke-width="4" stroke-linejoin="round"></path>
              </g>
            </svg>
          </div> -->
        </template>
      </zInfoShowBtn>
      
      <zInfoShowBtn :ifExpand="expandList.ifCommunityImageExpand" infoShowTitle="商场图片" @changeExpandHandler="changeExpandHandler('ifCommunityImageExpand')">
        <template #btnIcon>
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48" width="34" height="34" style="" filter="none">
            <g>
            <path d="M39 6H9C7.34315 6 6 7.34315 6 9V39C6 40.6569 7.34315 42 9 42H39C40.6569 42 42 40.6569 42 39V9C42 7.34315 40.6569 6 39 6Z" stroke="rgba(24,126,255,1)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path><path d="M18 23C20.7614 23 23 20.7614 23 18C23 15.2386 20.7614 13 18 13C15.2386 13 13 15.2386 13 18C13 20.7614 15.2386 23 18 23Z" fill="none" stroke="rgba(24,126,255,1)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M42 36L31 26L21 35L14 29L6 35" stroke="rgba(24,126,255,1)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>
            </g>
          </svg>
        </template>

        <template #contentCard>
          <van-swipe class="imageContent" :autoplay="5000" indicator-color="white" lazy-render v-if="expandList.ifCommunityImageExpand">
            <van-swipe-item v-for="(item, index) in xiaoQuDetailData.xiaoQuImage" :index="index">
              <img class="image" :src="item" @click="imagePreviewHandler(item)" />
            </van-swipe-item>
          </van-swipe>
          <!-- 左右点击切换的方式 -->
          <!-- <div class="imageContent" v-if="expandList.ifCommunityImageExpand">
            <img class="image" :src="communityImageList[showCommunityImageIndex]">
            <svg class="preImageBtn" @click="preImageHandler" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" width="32" height="32" style="" filter="none">
              <g>
              <path d="M16 28.622c6.971 0 12.622-5.651 12.622-12.622s-5.651-12.622-12.622-12.622-12.622 5.651-12.622 12.622 5.651 12.622 12.622 12.622zM16 29.689c-7.561 0-13.689-6.128-13.689-13.689s6.128-13.689 13.689-13.689 13.689 6.128 13.689 13.689-6.128 13.689-13.689 13.689zM13.547 19.787l0.739 0.766 4.72-4.558-4.693-4.723-0.757 0.752 3.931 3.955z" fill="rgba(255,255,255,1)"></path>
              </g>
            </svg>
            <svg class="nextImageBtn" @click="nextImageHandler" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" width="32" height="32" style="" filter="none">
              <g>
              <path d="M16 28.622c6.971 0 12.622-5.651 12.622-12.622s-5.651-12.622-12.622-12.622-12.622 5.651-12.622 12.622 5.651 12.622 12.622 12.622zM16 29.689c-7.561 0-13.689-6.128-13.689-13.689s6.128-13.689 13.689-13.689 13.689 6.128 13.689 13.689-6.128 13.689-13.689 13.689zM13.547 19.787l0.739 0.766 4.72-4.558-4.693-4.723-0.757 0.752 3.931 3.955z" fill="rgba(255,255,255,1)"></path>
              </g>
            </svg>
          </div> -->
        </template>
      </zInfoShowBtn>
    </div>
  </div>
</template>

<script setup>
import { pageConstant } from '@/config/contant.js'
import { postXiaoQuDetail } from '@/api/xiaoqu/index.js'
// import communityTourVideoExampleBack from '@/assets/img/communityTourVideoExampleBack.png'
import { useRouter } from 'vue-router'
const router = useRouter()
import { getSelectedXiaoQuId } from '@/config/config.js'

if (!getSelectedXiaoQuId()) {
  showDialog({
    message: '暂无小区数据，请先配置小区',
  }).then(() => {
    router.back()
  })
}

/**
 * 所有块的展开和收缩功能
 */
const expandList = ref({
  ifCommunityBasicExpand: false,
  ifParticipateUnitExpand: false,
  ifPropertyUnitExpand: false,
  ifCommunityTourExpand: false,
  ifCommunityImageExpand: false
})

const changeExpandHandler = (expandKey) => {
  if (expandList.value[expandKey]) {
    expandList.value[expandKey] = false
  } else {
    for (var keyItem in expandList.value) {
      expandList.value[keyItem] = false
    }

    expandList.value[expandKey] = true
  }
}

// 左右点击切换的方式 
// const communityImageList = ref([
//   'https://cdn.pixabay.com/photo/2017/06/05/10/15/landscape-2373649_1280.jpg',
//   'https://cdn.pixabay.com/photo/2017/03/19/12/41/banner-2156392_960_720.jpg',
//   'https://cdn.pixabay.com/photo/2016/03/09/14/40/office-1246484_1280.jpg'
// ])
// const showCommunityImageIndex = ref(0)
// const preImageHandler = () => {
//   if (showCommunityImageIndex.value == 0) {
//     showCommunityImageIndex.value = communityImageList.value.length - 1
//   } else {
//     showCommunityImageIndex.value = showCommunityImageIndex.value - 1
//   }
// }
// const nextImageHandler = () => {
//   if (showCommunityImageIndex.value == communityImageList.value.length - 1) {
//     showCommunityImageIndex.value = 0
//   } else {
//     showCommunityImageIndex.value = showCommunityImageIndex.value + 1
//   }
// }
const imagePreviewHandler = (url) => {
  showImagePreview([url]);
}

/**
 * 获取加载小区详细
 */
const xiaoQuDetailData = ref({})
const loadXiaoQuDetailHandler = () => {
  showLoadingToast({
    message: '加载中...',
    forbidClick: true,
    duration: 0
  });

  postXiaoQuDetail({xiaoQuId: getSelectedXiaoQuId()}).then(res => {
    // 关闭加载中提示
    closeToast();

    if (res.data.code == pageConstant.okCode) {
      let result = res.data.data
      result.completeYear = result.completeYear + '年'
      result.lvHuaRatio = result.lvHuaRatio + '%'
      if (result.xiaoQuWuYeList) {
        result.xiaoQuWuYeList.forEach(item => {
          item.staffNumber = item.staffNumber + '人'
          item.userSatisfaction = item.userSatisfaction + '%'
        })
      }
      if (result.urls) {
        result.xiaoQuImage = result.urls.split(',')
      }

      xiaoQuDetailData.value = result
    } else {
      showToast(res.data.msg);
    }
  })
  .catch((err) => {
    console.log(err)
  })
}
loadXiaoQuDetailHandler()
</script>

<style lang="scss" scoped>
.out {
  background-color: rgb(241, 241, 241);
  min-height: 100dvh;

  .pageOut {
    padding: 18px;
    padding-top: 0;

    .contentCard {
      margin-top: 10px;
      background-color: #fff;
      border-radius: 5px;
      padding: 10px;
      padding-bottom: 0;

      .contentItem {
        display: flex;
        padding-bottom: 10px;

        .tipText {
          font-weight: 600;
        }
      }
    }

    .imageContent {
      margin-top: 10px;
      border-radius: 5px;
      height: 225px;
      width: 100%;
      position: relative;
      overflow: hidden;

      .image {
        height: 100%;
        width: 100%;
        border-radius: 5px;
      }

      .videoPlayIcon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      .preImageBtn {
        position: absolute;
        top: 50%;
        left: 20px;
        transform: rotate(0.5turn) translate(50%, 50%);
      }

      .nextImageBtn {
        position: absolute;
        top: 50%;
        right: -10px;
        transform: translate(-50%, -50%);
      }
    }

    .cellGroupCard {
      background-color: #fff;
      margin: 0;
      margin-top: 10px;

      ::v-deep .van-cell {
        font-size: 16px;
      }
    }

    .videoContent {
      margin-top: 10px;
      border-radius: 5px;
      width: 100%;
      position: relative;
      overflow: hidden;
    }
  }
}
</style>